<template>
  <div>
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.back()" />
    <van-button type="primary" size="large" @click="$store.openSignin(true)" v-if="!$store.user.id">登录</van-button>
    <div class="cartList">
      <van-checkbox class="card-goods__item" v-model="item.checked" @change="updateChecked(item)"
        v-for="(item,index) in $store.cart" :key="item.id" :name="item.id">
        <!-- @click.stop阻止冒泡 -->
        <van-card @click.stop :title="item.name" :desc="item.desc" :num="item.num" :price="item.price"
          :thumb="'http://www.mianshiti.top' + item.cover">
          <div slot="num">
            <van-stepper v-model="item.count" @change="updateCount(item)" />
            <van-button @click="del(item.product_id,index)">
              <van-icon name="delete" />
            </van-button>
          </div>
        </van-card>
      </van-checkbox>
    </div>
    <van-submit-bar :price="totalPrice" :disabled="totalPrice == 0" button-text="结算" @submit = "onSubmit">
      
    </van-submit-bar>
  </div>
</template>

<script>
  export default {
    computed: {
      totalPrice() {
        let t = 0
        for (let i = 0; i < this.$store.cart.length; i++) {
          if (this.$store.cart[i].checked)
            t += this.$store.cart[i].price * this.$store.cart[i].count
        }
        return t * 100
      }
    },
    methods: {
      del(id, index) {
        this.$axios.get(`/cart/delete?product_id=${id}`).then(res => {
          if (res.errcode == 0) {
            this.$store.cart.splice(index, 1)
          }
        })
      },
      updateChecked(item) {
        this.$axios.post('/cart/update', {
          product_id: item.product_id,
          checked: +item.checked
        }).then(res => {
          if (res.errcode == 0) {
          }
        })
      },
      updateCount(item) {
        this.$axios.post('/cart/update', {
          product_id: item.product_id,
          count: item.count
        }).then(res => {
          if (res.errcode == 0) {

          }
        })
      },
      onSubmit(){
        let list = []
        for (let i = 0; i < this.$store.cart.length; i++) {
          if (this.$store.cart[i].checked)
            list.push(this.$store.cart[i])
        }
        sessionStorage.buyProducts = JSON.stringify(list)
        this.$router.push('/orderchecked')
      }
    },
    mounted() {
      this.$axios.get('/cart/all').then(res => {
        if (res.errcode == 0) {
          this.$store.cart = res.data
        }
      })
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .cartList {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    height: calc(100vh - 96px);
  }

  .cartList .item {
    float: left;
    width: 50vw;
    height: 68vw;
    margin-bottom: 20px;
  }

  .cartList .van-button--normal {
    padding:1px 9px;
    background: #d41f2799;
    font-size: 6vw;
    margin: 0 0 0 16.5vw;
  }

  .cartList .van-card {
    margin-bottom: 2vw;
  }
</style>